<template>
  <div class="homeContainer">
    <div class="navHeader">
      <van-nav-bar safe-area-inset-top fixed >
        <template #title>
          88888
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="linkSearch"/>
        </template>
      </van-nav-bar>   
    </div>
    <div class="channelBox">
      <van-tabs v-model="active" sticky offset-top="1.226rem" title-inactive-color="#666" color="pink" animated  @click="changeChannel">
        <van-tab v-for="item in channelList" :name="item.id" :title="item.name" :key="item.id">
          <div class="main">
            <ArticleList :channelId="channelId"></ArticleList>
          </div>
        </van-tab>
      </van-tabs>
      <van-icon name="plus" @click="showPopup" />
    </div>
    <!-- 弹出层组件 -->
    <van-popup v-model="isPopup" class="edit_wrap" @closed="onPopupClosed">
      <ChannelEdit :userChannelList="channelList" @close="isPopup = false" @addChannel="addChannelFn" @removeChannel="removeChannelFn" ref="channelEdit" @changeChannel="changeChannelFn"></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import { getUserChannelAPI, updateChannelAPI } from '@/api'
import ArticleList from '@/components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
const nameToTop = {}
export default {
  components: { ArticleList, ChannelEdit },
  data () {
    return {
      active: 0,
      channelList: [],
      ArticleList: [],
      channelId: 0,
      isPopup: false
    }
  },
  created () {
    this.getUserChannel()
  },
  methods: {
    // 获取用户选择的频道
    async getUserChannel () {
      const res = await getUserChannelAPI()
      this.channelList = res.data.data.channels
    },
    // 用户切换tabs
    async changeChannel (channel_id) {
      this.channelId = channel_id
    },
    // 显示频道管理弹出层
    showPopup () {
      this.isPopup = true
    },
    concealPopup () {
      this.isPopup = false
    },
    // 添加频道
    async addChannelFn (obj) {
      this.channelList.push(obj)
      this.updateChannel()
    },
    // 统一更新频道
    async updateChannel () {
      const newArr = this.channelList.map(obj => {
        const newObj = { ...obj }
        return newObj
      })
      const index = newArr.findIndex(obj => obj.name === '推荐')
      newArr.splice(index, 1)
      newArr.forEach((obj, index) => {
        delete obj.name
        obj.seq = index + 1
      })
      await updateChannelAPI(newArr)
    },
    // 删除频道
    async removeChannelFn (obj) {
      const ind = this.channelList.findIndex(item => item.id === obj.id)
      this.channelList.splice(ind, 1)
      this.updateChannel()
    },
    // 关闭弹层
    onPopupClosed () {
      this.$refs.channelEdit.isEdit = false
    },
    // 切换频道
    changeChannelFn (obj) {
      this.channelId = obj.id
    },
    // 频道切换之前触发
    tabsBeforeChangeFn () {
      nameToTop[this.channelId] = window.scrollY
      return true
    },
    // 频道切换后
    tabsChangeFn (channelId) {
      this.$nextTick(() => {
        window.scrollTo(0, nameToTop[channelId] || 0)
      })
    },
    // 打开搜索界面
    linkSearch () {
      this.$router.push('/search')
    }
  },
  // 路由离开触发
  beforeRouteLeave (to, from, next) {
    from.meta.top = window.scrollY
    next()
  }
}
</script>

<style lang="less" scoped>
  .homeContainer {
    width: 100%;
  }
  .van-nav-bar {
    background-color: pink;
  }
  .channelBox {
    position: relative;
    padding-top: 46px;
    .van-icon {
      position: fixed;
      right: 0;
      top: 46px;
      display: inline-block;
      font-size: 16px;
      background-color: #fff;
      padding: 14px 10px;
      z-index: 99;
    }
  }
  .main {
    margin: 0px 0 60px 0;
    box-sizing: border-box;
  }
  /deep/ .van-tabs--line .van-tabs__wrap {
    padding-right: 20px;
    box-sizing: border-box;
  }
  .van-popup {
    width: 100%;
    height: 100vh;
  }
  /deep/ .van-overlay {
    background-color: transparent;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
</style>
